<template>
  <div class="flex  flex-wrap">
    <div v-for="(item,index) in countryList" :key="index" class="rounded-4 border border-#eee border-solid country px-6 pt-6 pb-8 mb-6" @click="goSelectVisa(item,index)">
      <img class="w-16 h-10" src="@/assets/images/country-lable.jpeg" alt="">
      <p>{{ item.country_name }}</p>
    </div>
    <!-- <div v-if="selectedState == -1 && countryList.length && isAll" class="rounded-4 border border-#eee border-solid country pl-6 pt-6 pb-8 mb-6 to-country flex items-center">
      查看全部目的地
      <RectRight />
    </div> -->
  </div>
</template>
<script setup>
import { defineProps } from 'vue'
import { RectRight } from '@nutui/icons-vue';
import { useRoute, useRouter } from 'vue-router'
import { defineEmits } from 'vue'
const emit = defineEmits(['goSelectVisa'])
const router = useRouter()
defineProps({
  countryList: {
    type: Array
  },
  selectedState: {
    type: [Number, String],
    default: -1
  },
  isAll: {
    type: Boolean,
    default: true
  }
})
const goSelectVisa = (item) => {
  emit('goSelectVisa', item)
  //router.push({ path: '/visaList', query: { country_name: item.country_name, addr_json_url: addr_json_url } })
}
</script>

<style lang="scss" scoped>
.country {
  flex: 0 0 23%;
  margin-right: 2.6%;
}
.country:nth-child(4n) {
  margin-right: 0;
}
.country.to-country {
  margin-right: 0;
  flex: 0 0 48.2%;
}
</style>